<template>
  <view class="orderlist-wrap">
    <u-card :title="title1" >
      <view class="" slot="body">
        <u-grid :col="3">
          <u-grid-item >
            <view>{{accountOverview.totalPayAmount}}</view>
            <view class="grid-text">订单总收入</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.totalRefundAmount}}</view>
            <view class="grid-text">退款总金额</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.totalDriverProfit}}</view>
            <view class="grid-text">司机总收益</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.totalStationProfit}}</view>
            <view class="grid-text">检测站收益</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.totalMemberAndAgentProfit}}</view>
            <view class="grid-text">会员总收益</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.totalIncome}}</view>
            <view class="grid-text">平台总收入</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.totalOutcome}}</view>
            <view class="grid-text">平台总支出</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.totalProfit}}</view>
            <view class="grid-text">平台总收益</view>
          </u-grid-item>
        </u-grid>
      </view>
    </u-card>

    <u-card :title="title2" >
      <view class="" slot="body">
        <u-grid :col="3">
          <u-grid-item >
            <view>{{accountOverview.actTotalPayAmount}}</view>
            <view class="grid-text">订单总收入</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.actTotalRefundAmount}}</view>
            <view class="grid-text">退款总金额</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.totalDriverWithdraw}}</view>
            <view class="grid-text">司机总提现</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.totalStationWithdraw}}</view>
            <view class="grid-text">检测站提现</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.totalMemberAndAgentWithdraw}}</view>
            <view class="grid-text">会员总提现</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.actTotalIncome}}</view>
            <view class="grid-text">平台总收入</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.actTotalOutcome}}</view>
            <view class="grid-text">平台实际支出</view>
          </u-grid-item>
          <u-grid-item >
            <view>{{accountOverview.actTotalProfit}}</view>
            <view class="grid-text">平台实际结余</view>
          </u-grid-item>
        </u-grid>
      </view>
    </u-card>

  </view>
</template>

<script>

  export default {
    onShow() {
      this.loadAccountOverView();
    },
    data() {
      return {
        loginFlag: false,
        height: '100%',
        title1: '平台账户总览',
        title2: '平台账户实际支出',
        accountOverview: {}
      };
    },
    methods: {
      loadAccountOverView() {
        this.$clApi.haoleiAgentApi
          .fetchChartAccountOverview()
          .then(res => {
            if (res.code === 200) {
              this.accountOverview = res.data;
            } else {
              this.mescroll.endErr();
            }
          })
          .catch(() => {
            this.mescroll.endErr();
          });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .orderlist-wrap {
    width: 100%;
    height: 100vh;
    background-color: #2a3a52;
  }
</style>
